<!DOCTYPE html>
<html lang="zh-CN" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>X-Brain Agent - 文件管理</title>
    <link rel="stylesheet" href="css/dark-theme.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body class="bg-gray-900 text-gray-100">
    <!-- Sidebar -->
    <div class="fixed inset-y-0 left-0 w-64 bg-gray-800 shadow-lg">
        <div class="flex items-center justify-center h-16 bg-gray-700">
            <h1 class="text-xl font-bold">X-Brain Agent</h1>
        </div>
        <nav class="mt-4">
            <a href="index.html" class="flex items-center px-6 py-3 text-gray-300 hover:bg-gray-700">
                <i class="fas fa-home mr-3"></i>
                仪表盘
            </a>
            <a href="knowledge-base.html" class="flex items-center px-6 py-3 text-gray-300 hover:bg-gray-700">
                <i class="fas fa-book mr-3"></i>
                知识库
            </a>
            <a href="chat.html" class="flex items-center px-6 py-3 text-gray-300 hover:bg-gray-700">
                <i class="fas fa-comments mr-3"></i>
                智能对话
            </a>
            <a href="search.html" class="flex items-center px-6 py-3 text-gray-300 hover:bg-gray-700">
                <i class="fas fa-search mr-3"></i>
                语义搜索
            </a>
            <a href="agent.html" class="flex items-center px-6 py-3 text-gray-300 hover:bg-gray-700">
                <i class="fas fa-robot mr-3"></i>
                智能代理
            </a>
            <a href="file-manager.html" class="flex items-center px-6 py-3 bg-gray-700 text-white">
                <i class="fas fa-folder mr-3"></i>
                文件管理
            </a>
            <a href="#" class="flex items-center px-6 py-3 text-gray-300 hover:bg-gray-700">
                <i class="fas fa-cog mr-3"></i>
                系统设置
            </a>
        </nav>
    </div>

    <!-- Main Content -->
    <div class="ml-64 p-8">
        <!-- Header -->
        <header class="flex justify-between items-center mb-8">
            <div>
                <h2 class="text-2xl font-bold">文件管理</h2>
                <p class="text-gray-400">管理和组织您的文档</p>
            </div>
            <div class="flex gap-4">
                <button class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-lg flex items-center">
                    <i class="fas fa-folder-plus mr-2"></i>
                    新建文件夹
                </button>
                <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg flex items-center">
                    <i class="fas fa-upload mr-2"></i>
                    上传文件
                </button>
            </div>
        </header>

        <!-- File Browser -->
        <div class="bg-gray-800 rounded-lg shadow-lg">
            <!-- Toolbar -->
            <div class="p-4 border-b border-gray-700">
                <div class="flex justify-between items-center">
                    <!-- Breadcrumb -->
                    <div class="flex items-center space-x-2 text-gray-400">
                        <a href="#" class="hover:text-white">主页</a>
                        <i class="fas fa-chevron-right text-xs"></i>
                        <a href="#" class="hover:text-white">文档</a>
                        <i class="fas fa-chevron-right text-xs"></i>
                        <span class="text-white">技术</span>
                    </div>
                    <!-- View Options -->
                    <div class="flex items-center space-x-4">
                        <button class="text-gray-400 hover:text-white">
                            <i class="fas fa-th-large"></i>
                        </button>
                        <button class="text-gray-400 hover:text-white">
                            <i class="fas fa-list"></i>
                        </button>
                        <select class="bg-gray-700 text-gray-100 px-3 py-1 rounded">
                            <option>名称</option>
                            <option>日期</option>
                            <option>大小</option>
                            <option>类型</option>
                        </select>
                    </div>
                </div>
            </div>

            <!-- File Grid -->
            <div class="p-6 grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4">
                <!-- Folder -->
                <div class="bg-gray-700 rounded-lg p-4 cursor-pointer hover:bg-gray-600">
                    <div class="flex items-center space-x-3">
                        <i class="fas fa-folder text-3xl text-yellow-500"></i>
                        <div class="flex-1">
                            <h4 class="font-medium">文档</h4>
                            <p class="text-sm text-gray-400">12 个项目</p>
                        </div>
                    </div>
                </div>

                <!-- PDF File -->
                <div class="bg-gray-700 rounded-lg p-4 cursor-pointer hover:bg-gray-600">
                    <div class="flex items-center space-x-3">
                        <i class="fas fa-file-pdf text-3xl text-red-500"></i>
                        <div class="flex-1">
                            <h4 class="font-medium">用户指南.pdf</h4>
                            <p class="text-sm text-gray-400">2.5 MB</p>
                        </div>
                    </div>
                </div>

                <!-- Word File -->
                <div class="bg-gray-700 rounded-lg p-4 cursor-pointer hover:bg-gray-600">
                    <div class="flex items-center space-x-3">
                        <i class="fas fa-file-word text-3xl text-blue-500"></i>
                        <div class="flex-1">
                            <h4 class="font-medium">报告.docx</h4>
                            <p class="text-sm text-gray-400">1.2 MB</p>
                        </div>
                    </div>
                </div>

                <!-- Text File -->
                <div class="bg-gray-700 rounded-lg p-4 cursor-pointer hover:bg-gray-600">
                    <div class="flex items-center space-x-3">
                        <i class="fas fa-file-alt text-3xl text-gray-400"></i>
                        <div class="flex-1">
                            <h4 class="font-medium">笔记.txt</h4>
                            <p class="text-sm text-gray-400">45 KB</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- File Details -->
            <div class="border-t border-gray-700 p-4">
                <div class="flex justify-between items-center">
                    <div class="text-gray-400">
                        <span>已选择 4 个项目</span>
                        <span class="mx-2">•</span>
                        <span>总大小：3.75 MB</span>
                    </div>
                    <div class="flex space-x-2">
                        <button class="text-gray-400 hover:text-white px-3 py-1">
                            <i class="fas fa-copy mr-1"></i>
                            复制
                        </button>
                        <button class="text-gray-400 hover:text-white px-3 py-1">
                            <i class="fas fa-arrow-right mr-1"></i>
                            移动
                        </button>
                        <button class="text-red-500 hover:text-red-400 px-3 py-1">
                            <i class="fas fa-trash mr-1"></i>
                            删除
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Recent Files -->
        <div class="mt-8">
            <h3 class="text-xl font-semibold mb-4">最近文件</h3>
            <div class="bg-gray-800 rounded-lg">
                <table class="w-full">
                    <thead>
                        <tr class="text-left border-b border-gray-700">
                            <th class="p-4">名称</th>
                            <th class="p-4">修改时间</th>
                            <th class="p-4">大小</th>
                            <th class="p-4">类型</th>
                            <th class="p-4"></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="border-b border-gray-700">
                            <td class="p-4">
                                <div class="flex items-center">
                                    <i class="fas fa-file-pdf text-red-500 mr-3"></i>
                                    技术规范.pdf
                                </div>
                            </td>
                            <td class="p-4 text-gray-400">2 小时前</td>
                            <td class="p-4 text-gray-400">3.2 MB</td>
                            <td class="p-4 text-gray-400">PDF 文档</td>
                            <td class="p-4">
                                <button class="text-gray-400 hover:text-white">
                                    <i class="fas fa-ellipsis-v"></i>
                                </button>
                            </td>
                        </tr>
                        <tr class="border-b border-gray-700">
                            <td class="p-4">
                                <div class="flex items-center">
                                    <i class="fas fa-file-word text-blue-500 mr-3"></i>
                                    项目计划.docx
                                </div>
                            </td>
                            <td class="p-4 text-gray-400">昨天</td>
                            <td class="p-4 text-gray-400">1.8 MB</td>
                            <td class="p-4 text-gray-400">Word 文档</td>
                            <td class="p-4">
                                <button class="text-gray-400 hover:text-white">
                                    <i class="fas fa-ellipsis-v"></i>
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script src="js/main.js"></script>
</body>
</html>
